<template>
    <div class="index">
        <div class="i-swiper">
            <swiper class="my-swiper" :options="swiperOption" ref="mySwiper">
                <swiper-slide><img src="../assets/img/couponA.png"></swiper-slide>
                <swiper-slide><img src="../assets/img/couponB.png"></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="desc">
            <div class="money">
                <em>¥</em>0</div>
            <div class="text">
                <p>学习就要燃，寒假课拼团！</p>
                <p>双人拼100元高中班课代金券</p>
            </div>
        </div>
        <div class="other i-list" v-if="groups.length">
            <div class="label">
                <span>正在拼团</span>
            </div>
            <ul class="o-list">
                <li v-for="(item,i) in groups" v-show="item.show">
                    <div class="head-img">
                        <img src="../assets/img/Icon_boy.png" alt="">
                    </div>
                    <div class="phone">
                        {{item.phone}}
                    </div>
                    <div class="status">
                        <p>还差
                            <em>1</em> 人</p>
                        <p>剩余 {{item.restTime}}</p>
                    </div>
                    <div class="join" @click="joining(false,item)">
                        <span>马上参团</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="check">
            <input v-model="phone" type="text" placeholder="输入手机号码，立刻查询开团情况">
            <span @click="actGroDetByPhone">结果查询</span>
        </div>
        <div class="i-list num-list play">
            <div class="label">
                <span>玩法说明</span>
            </div>
            <ul class="o-list">
                <li v-for="(item,i) in play">
                    <div class="num-img">
                        <svg class="icon" :class="'icon'+(i+1)" aria-hidden="true">
                            <use xlink:href="#icon-dian"></use>
                        </svg>
                        <div class="num">{{i+1}}</div>
                    </div>
                    <div class="text">
                        <span v-html="item"></span>
                    </div>
                </li>
            </ul>
            <div class="tip">
                温馨提示：本拼团限购，即同一用户只能发起一次开团或参团，凡拼团成功的每位用户仅享受100元代金券/份
            </div>
        </div>
        <div class="i-list num-list use">
            <div class="label">
                <span>代金券使用说明</span>
            </div>
            <ul class="o-list">
                <li v-for="(item,i) in use">
                    <div class="num-img">
                        <svg class="icon" :class="'icon'+(i+1)" aria-hidden="true">
                            <use xlink:href="#icon-dian"></use>
                        </svg>
                        <div class="num">{{i+1}}</div>
                    </div>
                    <div class="text">
                        {{item}}
                    </div>
                </li>
            </ul>
        </div>
        <div class="bottom-div" v-if="canStart">
            <div class="join-btn" @click="joining(true)">我要开团</div>
        </div>
        <v-form ref="form"></v-form>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import VForm from './Form'
import io from '../lib/io'
export default {
    components: {
        swiper,
        swiperSlide,
        VForm
    },
    data() {
        return {
            groups: [],
            phone: '',
            use: [
                '可用于报读卓越高中2019寒假课程，可叠加常规优惠；若已报读2019寒假课程，本券可用于拓科报读其他寒假班级；本券不折现，不储值',
                '有效期为2018年12月17日0:00-2019年1月4日23:59，逾期作废',
                '需到预约校区兑换，兑换后可用于网上、前台报读',
                '每位学员限享1张代金券，每张代金券限用1次'
            ],
            play: [
                '点击下方<em>“我要开团”</em>，填写资料，立即开团',
                '<em>转发</em>拼团链接，邀请1位好友<em>参团</em>',
                '2人成功拼团，将收到<em>短信通知</em>，凭短信到预约校区同享优惠 '
            ],
            swiperOption: {//swiper3
                autoplay: true,
                loop: true,
                speed: 3000,
                height: 345,
                pagination: '.swiper-pagination'
            },
            inter0: '',
            inter1: '',
            inter2: '',
            restTime0: '',
            restTime1: '',
            restTime2: '',
            canStart: true
        }
    },
    created() {
        this.init()
        this.findCanActivityGroup()
    },
    destroyed() {
        clearInterval(this.inter0)
        clearInterval(this.inter1)
        clearInterval(this.inter2)
    },
    mounted() {
        document.body.scrollTop = 0
    },
    methods: {
        init() {
            let nowTime = new Date().getTime()
            let endTime = new Date('2018/12/31 23:59:59').getTime()
            if (nowTime > endTime) {
                this.canStart = false
            }
        },
        joining(type, item) {//type表示是否是开团
            let form = this.$refs.form
            form.showOrHide(true)
            form.changeIsNew(type)
            item ? form.changeId(item.activityGroupId) : ''
        },
        async actGroDetByPhone() {
            if (!this.phone) {
                alert('请输入手机号！')
                return
            }
            let { data } = await io.post(io.actGroDetByPhone, { phone: this.phone })
            if (data.success) {
                this.$router.push({ path: '/result', query: { type: 'self', activityGroupId: data.data.activityGroupId } })
            }
        },
        async findCanActivityGroup() {
            let { data } = await io.post(io.findCanActivityGroup)
            if (data.success) {
                data.data.map((item, i) => {
                    item.show=true
                    console.log('xx')
                    this['restTime' + i] = item.closeTime - new Date().getTime()
                    this['inter等等' + i] = setInterval(() => {
                        if (this['restTime' + i] < 0) {
                            clearInterval(this['inter' + i])
                            item.show=false
                            this.groups = [...data.data]
                            return
                        }
                        item = this.dealTime(this['restTime' + i], item)
                        this['restTime' + i] = this['restTime' + i] - 1000
                        this.groups = [...data.data]
                    }, 1000)
                })
            }
        },
        dealTime(restTime, data) {
            let hours = parseInt(restTime / 3600 / 1000)
            let minute = parseInt((restTime - hours * 3600 * 1000) / 60 / 1000)
            let second = parseInt((restTime - hours * 3600 * 1000 - minute * 60 * 1000) / 1000)
            data.restTime = hours + ':' + minute + ':' + second
            return data
        }
    }
}
</script>
<style lang="stylus" scoped>
.index
    background #F5F5F5
    min-height 100%
    .i-swiper
        img
            height 3.45rem
            width 7.5rem
    .desc
        padding .14rem .24rem
        background #ffffff
        margin-bottom .24rem
        .money
            color #FF2117
            font-size .48rem
            line-height .48rem
            font-weight bold
            em
                font-size .3rem
                font-weight normal
                margin-right 0.05rem
        .text
            color #292929
            font-weight bold
            font-size .36rem
            p
                margin 0
    .other,.i-list
        background #ffffff
        border-bottom 2px solid #f5f5f5
        .label
            span
                display inline-block
                width 1.68rem
                height .58rem
                background #FEF6E7
                border-top-right-radius .28rem
                border-bottom-right-radius .28rem
                color #E1990E
                display flex
                align-items center
                font-size .3rem
                padding-left .22rem
                box-sizing border-box
        .tip
            padding 0 .6rem
            font-size .3rem
            color #666
            margin-top .3rem
            margin-bottom .3rem
        .o-list
            padding 0 .24rem
            margin 0
            li
                display flex
                align-items center
                font-size .3rem
                border-bottom 2px solid #f5f5f5
                &:last-child
                    border-bottom 0
                .head-img
                    width .8rem
                    height .8rem
                    border-radius .8rem
                    border 2px solid #f5f5f5
                    img
                        width 100%
                        height 100%
                .phone
                    margin-left .22rem
                .status
                    margin-left .5rem
                    p
                        margin 0
                        &:first-child
                            margin-bottom .2rem
                    em
                        color #FF2117
                        font-weight bold
                .join
                    flex 1
                    display flex
                    justify-content flex-end
                    span
                        display flex
                        width 1.52rem
                        height .56rem
                        background #FF2117
                        justify-content center
                        align-items center
                        color #ffffff
                        font-size .3rem
                        border-radius .1rem
                        font-weight bold
    .check
        height 1.04rem
        display flex
        align-items center
        padding 0 .24rem
        background #ffffff
        margin-bottom .24rem
        input
            width 4.7rem
            height .64rem
            line-height .64rem
            background #EEEEEE
            font-size .24rem
            color #ADADAD
            padding-left .17rem
            box-sizing border-box
            border-radius .1rem
        span
            display flex
            height .56rem
            width 1.52rem
            margin-left .5rem
            border 2px solid #EBB95A
            border-radius .1rem
            color #EBB95A
            align-items center
            justify-content center
            font-size .3rem
    .num-list
        &.use
            margin-bottom .24rem
            .label
                span
                    width 2.6rem !important
        .o-list
            padding 0 0
            font-size .3rem
            color #666
            li
                border-bottom 0
                margin-bottom .16rem
                align-items flex-start
                padding-right .2rem
                &:first-child
                    margin-top .22rem
            .play2-li
                margin 0
                padding 0 .8rem
                position relative
                top -.3rem
                span
                    display inline-block
                    width .16rem
                    height .16rem
                    border-radius .2rem
                    background #999
                    position relative
                    top -.02rem
                    margin-right .1rem
            .num-img
                margin-left .1rem
                margin-right .04rem
                width .5rem
                position relative
                display flex
                justify-content center
                padding-top .02rem
                .num
                    width 100%
                    font-size .3rem
                    color #ffffff
                    position absolute
                    left 50%
                    transform translateX(-50%)
                    text-align center
                .icon
                    font-size .38rem
                    color #FFDA93
                .icon2
                    color #EBE96F
                .icon3
                    color #C8F775
                .icon4
                    color #92F9A6
                .icon5
                    color #84F4E0
                .icon6
                    color #97DFF6
            .text
                font-size .3rem
        &.play
            .icon1
                color #97DFF6
            .icon2
                color #B0CBF7
            .icon3
                color #DACAFF
            .icon4
                color #F0C4FF
            .icon5
                color #FDC6EC
            .icon6
                color #FDC6C6
            .icon7
                color #F9D287
    .bottom-div
        width 100%
        height .88rem
        position relative
        .join-btn
            position fixed
            height .88rem
            width 100%
            display flex
            justify-content center
            align-items center
            background #F4A418
            color #ffffff
            font-size .42rem
            font-weight bold
            bottom 0

</style>
<style lang="stylus">
// .swiper-pagination-bullet
//     background #ffffff
.o-list
    .text
        em
            color red
</style>


